<template>
    <div>
        <section class="base-list custom-input">
            <el-row class="search">
                <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="堆场">
                                <auto-search-area-no v-model="condition['search_LIKE_areaNo']"></auto-search-area-no>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-100">查 询</el-button>
                            <el-button formVisible="true" icon="el-icon-plus" @click="handleDialogFormOpen(false)" v-if="power('WJOB_YARDPLAN_MACHINE:ADD')">
                                新增
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="border-line"></div>
            </el-row>
            <el-row class="content" v-loading="listLoading" element-loading-text="列表加载中...">
                <el-table :data="yardMachine" border stripe max-height="500">
                    <el-table-column prop="areaNo" label="场区"  min-width="130"></el-table-column>
                    <el-table-column prop="orgName" label="所属单位"  min-width="200"></el-table-column>
                    <el-table-column prop="deptName" label="所属部门"  min-width="200"></el-table-column>
                    <el-table-column v-for="(item,index) in tableHeader" :prop="item.prop" :label="item.label" :key="index"  min-width="120">
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作"  width="140">
                        <template slot-scope="scope">
                            <el-button size="small" type="text" @click="handleDialogFormOpen(true,scope.$index)" v-if="power('WJOB_YARDPLAN_MACHINE:UPD')">
                                编辑
                            </el-button>
                            <el-button type="text" class="danger" size="small" @click="handleRemove(scope.row)" v-if="power('WJOB_YARDPLAN_MACHINE:DEL')">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row class="bottom" type="flex">
                <div class="oper">
                </div>
                <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size" layout="total, sizes, prev, pager, next, jumper" :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr" :page-size="pageInfo.iDisplayLength" :total="total">
                </el-pagination>
            </el-row>
        </section>
        <!-- </base-list> -->
        <yard-machine-form ref="yardMachineForm" @load="loadData"></yard-machine-form>
    </div>
</template>

<script>
import { deleteYardMachine, getYardMachineList } from "@/api/yardPlan/yardPlan";
import yardMachineForm from "./yardMachineForm";
import autoSearchAreaNo from "@/components/autocomplete/autoSearchAreaNo";

export default {
    name: "堆场机械管理",
    components: {
        yardMachineForm,
        autoSearchAreaNo
    },
    data() {
        return {
            condition: {}, // 查询条件
            yardMachine: [], // table数组
            pageSearch: getYardMachineList, // 分页查询api接口
            id: "",
            machine: [],
            tableHeader: [],
            listLoading: false,
            total: 0,
            pageInfo: this.$defalutPage()
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.loadData();
        });
    },
    activated() {
        this.loadData();
    },
    methods: {
        loadData() {
            let params = this.$assist.copySearchConditions(this.condition);
            params.iDisplayStart = this.pageInfo.pageStart - 1;
            params.iDisplayLength = this.pageInfo.iDisplayLength;
            params.sortType = "-createDateTime";
            this.listLoading = true;
            getYardMachineList(params).then(res => {
                this.total = res.data.iTotalRecords;
                // console.log(1);
                this.machine.splice(0, this.machine.length);
                this.tableHeader.splice(0, this.tableHeader.length);
                this.yardMachine.splice(0, this.yardMachine.length);
                this.machine = JSON.parse(JSON.stringify(res.data.aaData));
                let data = JSON.parse(JSON.stringify(res.data.aaData));
                let arr = [];
                for (let i = 0; i < data.length; i++) {
                    let el = data[i];
                    for (var tmp in el) {
                        if (
                            tmp === "containerYardMachine" &&
                            el[tmp] &&
                            el[tmp].length > 0
                        ) {
                            for (let j = 0; j < el[tmp].length; j++) {
                                let et = el[tmp][j];
                                for (var t in et) {
                                    if (t === "jobMachineName") {
                                        let key = t + [j + 1];
                                        el[key] = et[t];
                                    }
                                }
                            }
                        }
                    }
                }
                let sort = [];
                for (let i = 0; i < data.length; i++) {
                    delete data[i].containerYardMachine;
                    sort.push(data[i]);
                }
                let num = sort.sort(
                    (a, b) => Object.keys(b).length - Object.keys(a).length
                )[0];
                for (var tmp in num) {
                    let label = "";
                    // console.log(tmp);
                    if (tmp.indexOf("jobMachineName") > -1) {
                        label = "机械" + tmp.split("jobMachineName")[1];
                        arr.push({
                            prop: tmp,
                            label: label
                        });
                    }
                }
                this.listLoading = false;
                this.tableHeader = arr;
                // console.log(arr);
                this.yardMachine = data;
                // console.log(this.yardMachine);
                // console.log(data);
            });
        },
        handleDialogFormOpen(bool, item) {
            if (bool) {
                let form = JSON.parse(JSON.stringify(this.machine[item]));
                let yard = [
                    {
                        jobMachineName: "",
                        jobMachineId: "",
                        priority: "",
                        startBay: "",
                        endBay: "",
                        startRow: "",
                        endRow: "",
                        valid: true,
                        remark: ""
                    }
                ];
                // console.log(form);
                this.$refs.yardMachineForm.form = {
                    id: form.id,
                    areaNo: form.areaNo,
                    areaId: form.areaId,
                    orgId: form.orgId,
                    orgName: form.orgName,
                    deptId: form.deptId,
                    deptName: form.deptName,
                    containerYardMachine: form.containerYardMachine || yard
                };
                this.$refs.yardMachineForm.maxBay = form.maxBay;
                this.$refs.yardMachineForm.maxRow = form.maxRow;
                this.$refs.yardMachineForm.virtual = form.virtual;
                this.$refs.yardMachineForm.isEdit = true;
                this.$refs.yardMachineForm.dialogForm = true;
            } else {
                this.$refs.yardMachineForm.dialogForm = true;
            }
        },
        handleRemove(item) {
            this.$confirm(`是否删除该数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteYardMachine(item.id).then(res => {
                        this.$message({
                            type: "success",
                            message: `删除成功!`
                        });
                        this.loadData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        }
    },
    watch: {
        pageInfo: {
            deep: true,
            handler: function() {
                this.loadData();
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .base-list {
        width: 100%;
        .search {
            padding-top: 10px;
            margin-bottom: 0px;
            .border-line {
                margin-top: 20px;
                border-bottom: 1px dashed #ddd;
            }
        }
        .bottom {
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
            align-items: center;
        }
        .operbar {
            padding-top: 10px;
            display: flex;
            justify-content: flex-end;
        }
        .content {
            padding: 30px 0 15px 0;
        }
        &.alone-row {
            .border-line {
                margin-top: 20px;
            }
        }
    }
</style>
